<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化{10个属性}</title>
		<style>
			/* css3: 选择器{属性: 属性值;} 
			一个样式
			
			选择器权重
			id: ----100
			类选择器 伪类选择器----10
			元素选择器-----1
			内联样式表----1000*/
			
			/* 文本格式化 */
			/* 控制字体: font-family  font-size  font-weight */
			/* 控制文本格式: text-align  line-height  letter-spacing  word-spacing */
			/* 控制文本修饰: text-decoration  text-shadow*/
			div#d1{
				/* color: purple; */
				/* 知识点2: 文本格式化属性 4种方式 10个属性
				
				            ①控制字体: */
							font-family: "华文彩云",sans-serif;
							/* 可设置多个字体 浏览器会按照顺序找字体 */
							font-size: 100px;
							/* px/em
						    px----pc端----像素  特点: 绝对值
							 em---移动端---特点: 相对于父元素字体大小 倍数放大
							 */
							 
							font-weight: bold;
							/* normal---400
							 bold---700
							 light;*/
							 
							 
							 
							/* ②控制文本格式 */ /* 对齐 间隙 */
							color: #aa55ff;
							/* text-align: center; */
							/* text-align: justify; */
							
							text-decoration-line: underline;
							text-decoration-color: #ffe0f6;
							text-decoration-style: solid;
							text-decoration-thickness: 10px;
							line-height: 150px;
							text-indent: 10px;
			}
			h1.a{
				color: #aa55ff;
				text-align: center;
				font-family: "华文彩云";
			}
			h1#c{
				color: #aa55ff;
				text-align: justify;
				font-family: "华文彩云";
			}
			
			
			
			/* 派生选择器 */
			#d span{
				border: 1px solid red;
				height: 60px;
				/* 行转块 */
				display: block;
				/* 文本对齐方式【垂直】 */
				/* line-height 行高属性
				 使用方式 一定跟高度一起出现【垂直】
				 行高与高度一致----文本出现在中央*/
				 line-height: 60px;
				 
				 
				 /* 文本间隙 [字符] */
				 /* letter-spacing: 1px; */
				 
				 /* 文本间隙 [单词] */
				 word-spacing: 1px;
				 
				 /* text-transform: uppercase; */   /* 文本全大写 */
				 text-transform: capitalize;  /* 文本首字母大写 */
				 text-indent: 200px;
			}
			
			/* ③控制文本修饰   针对超链接
			使用方法 通配选择器一起使用*/
			
			/* underline: 默认 下划线 切换
			 line-through: 删除线 被html5中s元素替代*/
			a{
				text-decoration-line: none;
				/* text-decoration-line: line-through; */
				color: lightblue;
				
				/* text-shadow  文本阴影
				 属性值: X值   Y值   blur模糊距离   颜色*/
				text-shadow: 5px 5px 10px #f00;
			}
			
			p{
				/* white-space  换行属性
				 属性值不同效果不同
				 nowrap   效果: 不换行  作用: 在一行显示 不超出范围 特点: 溢出
				 pre;     效果: 保留空格和回车{打啥显示啥}
				 normal;  默认    空格合并(去除) 自动换行*/
				border: 1px solid red;
				/* white-space: nowrap; */
				/* white-space: pre; */  /* 打啥显示啥 */
				/*overflow: hidden;*/ /* 其他行省略 */
				/* white-space: normal; */
			}
			
			
			
			
		</style>
	</head>
	<body>
		
		<h1>处理文本效果【换行和溢出】</h1>
		<p>L       orem ipsum dolor sit amet consectetur adipisicing elit. Rem repellat, illo dolorum maiores soluta quis ipsum pariatur odit error consectetur natus tempora quo doloremque cupiditate quod, distinctio suscipit recusandae eaque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis asperiores harum recusandae sequi nesciunt a quibusdam, vitae odit temporibus facilis illum inventore distinctio sint aut magni debitis ut autem officiis! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem reprehenderit, id quidem perferendis obcaecati, placeat repellat corrupti neque harum similique voluptatum. Debitis iure temporibus voluptate iusto quibusdam provident fugit distinctio. </p>
		
		
		
		
		<h1>
			<marquee>控制文本布局[对齐 间隙]</marquee>
		</h1>
		
		<div id="d";>
			<span id="s";>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores vel ratione excepturi tempora? Modi dolor, sequi ut harum impedit odit voluptatum eveniet nulla rem consequatur totam atque animi ex ullam.</span>
		</div>
		
		<div style="height: 200px;"></div>
		<h1>文本修饰效果</h1>
		<a href="https://wf.tsgzy.edu.cn/">跳转到唐工官网</a>
		<!-- 超链接6种跳转 -->
		
		
		
		
		
		<div id="d1";>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium ullam eum ipsam eaque aliquam dolores repudiandae, impedit harum tempora error architecto odit dolore libero amet alias vitae iusto fugiat nulla?</div>
		<!-- 需求: 外层div 内层h1 两个别名  设置字体颜色  加权-->
		<div>
			<h1 class="a b"; id="c"; >Hayasei</h1>
		</div>
	</body>
</html>